<template>
  <div class="quesbank-tree-con">
    <el-input v-model="filterText" placeholder="输入关键字进行过滤"/>
    <el-tree
      v-loading="treeloading"
      ref="qtree"
      :data="treedata"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :render-content="renderContent"
      :expand-on-click-node="false"
      :check-on-click-node="true"
      :load="loadtree"
      :highlight-current="true"
      :show-checkbox="true"
      :check-strictly="true"
      lazy
      node-key="id"
      class="filter-tree"/>
  </div>
</template>
<script>
// import { fetchtree } from '@/api/resource/question'
export default {
  name: 'QuestionBank',
  data() {
    return {
      treeloading: false,
      quesClassifyId: '-1',
      filterText: '',
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'question'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.qtree.filter(val)
    }
  },
  methods: {
    getSelectData() {
      const clickTree = this.$refs.qtree.getCheckedNodes()
      if (clickTree.length > 0) {
        return clickTree
      } else {
        this.$message({
          showClose: true,
          message: '请选择试题分类',
          type: 'warning'
        })
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.question.indexOf(value) !== -1
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span class='tree-node-txt'>
            <span class='svg-container'>
              <svg-icon icon-class='folder' />
            </span>
            <span style='margin-left:5px;'>{node.label}</span>
          </span>
        </span>
      )
    },
    loadtree(node, resolve) {
      this.treeloading = true
      if (node.level === 0) {
        const classifyId = this.quesClassifyId
        fetchtree(classifyId, '0').then(res => {
          this.treeloading = false
          const treeData = []
          res.data.data.forEach(e => {
            treeData.push(e)
          })
          resolve(treeData)
        }).catch(res => {
          this.treeloading = false
          resolve([])
        })
      } else {
        const classifyId = node.data.id
        fetchtree(classifyId, '0').then(res => {
          this.treeloading = false
          var myList = []
          res.data.data.forEach(e => {
            myList.push(e)
          })
          resolve(myList)
        }).catch(res => {
          this.treeloading = false
          resolve([])
        })
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .quesbank-tree-con{
    max-height: 400px;
    overflow: auto;
    padding: 0px 20px;
    .custom-tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      width: 100%;
      .tree-node-txt{
        flex: 1;
      }
    }
  }
</style>

